<template>
	<view class="showcasethree" :style="{marginTop: source.margin + 'px', marginBottom: source.margin2 + 'px'}">
		<block v-if="source.style.active === 'style-2'">
			<view v-for="(item, index) in source.img_list" :key="index" class="item">
				<wx-auth :type="1" :link="item"></wx-auth>
				<image :src="item.url" mode="widthFix"></image>
			</view>
		</block>
		<block v-else>
			<view class="three">
				<view>
					<wx-auth :type="1" :link="source.img_list[0]"></wx-auth>
					<image :src="source.img_list[0].url" class="main"></image>
				</view>
				<view>
					<block v-for="(item, index) in three" :key="index">
						<view>
							<wx-auth :type="1" :link="item"></wx-auth>
							<image mode="widthFix" :src="item.url"></image>							
						</view>
					</block>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			source: [Object]
		},
		computed: {
			three () {
				return this.source.img_list.filter((item, index) => index !== 0)
			}
		}
	}
</script>

<style lang="less">
@import '../../../common/styles/variables.less';	
.showcasethree {
	display:flex;
	overflow:hidden;
	background-color:white;
	.item {
		flex:1;
		margin-right: 19upx;
		position: relative;
		image {
			height: 100%;
			width: 100%;
			display: block;
		}
		&:last-of-type {
			margin-right: 0;
		}		
	}
	.three {
		display: flex;
		justify-content: space-between;
		width: 100%;
		overflow: hidden;
		& > view {
			flex: 1;
			max-width: 50%;
			position: relative;
			&:nth-of-type(2) {
				& > view {
					position: relative;
				}
			}
			image {
				display: block;
				width: 100%;
				&.main {
					height: 100%;
				}
			}
		}
	}
}
</style>
